﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Trigger.aspx.cs" Inherits="ControlExplorer.C1ToolTip.Trigger" %>

<%@ Register Namespace="C1.Web.Wijmo.Controls.C1ToolTip" Assembly="C1.Web.Wijmo.Controls.3" TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
    <style type="text/css">
        .link
        {
            color: #000000;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:HyperLink ID="HyperLink1" runat="server" ToolTip="tooltip" CssClass="link">锚点</asp:HyperLink>
    <wijmo:C1ToolTip runat="server" ID="Tooltip1" TargetSelector="#HyperLink1" CloseBehavior="Sticky">
    </wijmo:C1ToolTip>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
      此示例演示显示不同的事件如何触发工具提示。默认行为使用悬停触发工具提示。</p>
    <p>
        在此示例中，改变触发事件的工具提示使用下列属性</p>
    <ul>
        <li><strong>CloseBehavior</strong> 在服务器端</li>
        <li><strong>triggers</strong> 在客户端</li>
    </ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
    <label>
        触发器</label>
    <select id="trigger">
        <option value="hover">悬停</option>
        <option value="click">点击</option>
        <option value="focus">焦点</option>
        <option value="rightClick">右击</option>
        <option value="custom">自定义</option>
    </select>
    <div>
        <input id="show" type="button" value="当设置触发为自定义时，显示工具提示" /></div>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#trigger").change(function () {
                $("#<%=HyperLink1.ClientID %>").c1tooltip("option", "triggers", $("#trigger").val());
            });
            $("#show").click(function () {
                $("#<%=HyperLink1.ClientID %>").c1tooltip("show");
            });
        });        
      
    </script>
</asp:Content>
